<template>
  <div>
    <a-modal
      title="历史记录"
      :open="exportHistoryModal"
      :footer="null"
      :width="1500"
      @cancel="exportHistoryModal = false"
    >
      <!-- :pagination="pagination" @change="handleTableChange" -->
      <a-table :columns="exportColumns" :data-source="exportData" width="100%">
        <template #bodyCell="{ column, record }">
          <div v-if="column.dataIndex === 'createUser'">
            <a-button type="link" @click="download(record)">下载</a-button>
          </div>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, h, watch, computed, toRaw } from 'vue';
import axios from 'axios';
const exportHistoryModal = ref(false);
const props = defineProps({
  open: {
    type: Boolean,
    default: false,
  },
  data: {
    type: Array,
    default: () => [],
  },
});

const exportData = ref([]);
const exportColumns = [
  {
    title: '文件名',
    dataIndex: 'fileName',
    key: 'fileName',
  },
  {
    title: '操作日期',
    dataIndex: 'createTime',
    key: 'createTime',
  },
  {
    title: '结束日期',
    dataIndex: 'examineTime',
    key: 'examineTime',
  },
  {
    title: '操作人',
    dataIndex: 'createPersonName',
    key: 'createPersonName',
  },
  {
    title: '机构',
    dataIndex: 'comName',
    key: 'comName',
  },
  {
    title: '状态',
    dataIndex: 'isOk',
    key: 'isOk',
    // 判断状态
    customRender: (text, record, index) =>
      text.record.isOk === 1 ? '成功' : '失败',
  },
  {
    title: '操作',
    dataIndex: 'createUser',
    key: 'createUser',
  },
];

watch(
  () => [props.open, props.data],
  ([newProps, newData]) => {
    console.log('newProps', newProps);
    console.log('newData', newData);
    exportHistoryModal.value = newProps;
    exportData.value = newData.data;
    // total.value = newData.total;
  },
  {
    immediate: true,
    deep: true,
  },
);

// 下载
const download = (data: string) => {
  console.log('data', data);
  if (data.fileUrl) {
    let baseUrl = 'http://192.168.2.136:8090';
    let url = `/api${data.fileUrl.split(':')[1]}${data.fileName}`;
    console.log('url', url);
    axios({
      method: 'get',
      // 代理配置
      url: url,
      responseType: 'blob',
    }).then((res) => {
      console.log(res);
      const contentType =
        res.headers['content-type'] || 'application/octet-stream';
      const blob = new Blob([res.data], { type: contentType });
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      // 从响应头中获取文件名，如果没有则使用默认名
      const contentDisposition = res.headers['content-disposition'];
      if (contentDisposition) {
        const filenameMatch = contentDisposition.match(
          /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/,
        );
        if (filenameMatch) {
          let filename = filenameMatch[1].replace(/['"]/g, '');
          a.download = filename;
        }
      } else {
        a.download = 'default_file.xlsx';
      }
      a.click();
      window.URL.revokeObjectURL(url);
    });
  }
};
</script>

<style scoped></style>
